<template>
	<div class="live-players" ref="playersRef">
		<div class="live-players__warp">
			<div class="palyers-container">
				<!-- 视频播放器区域 -->
				<div
					class="live-play"
					@click="toolFun.setCurrentWindow(player)"
					:class="{ active: _currentWindow.id === player.id }"
					:style="{ width: windowSize[0] + '%', height: windowSize[1] + '%' }"
					v-for="(player, index) in _players"
					:key="player.id"
				>
					<div class="live-play-warp">
						<Player :videoUrl="player.url" :index="index" :videoTitle="player.name" :aspect="_radio" @close="videoHandleClose"></Player>
					</div>
				</div>
				<!-- empty 占位 -->
				<div
					v-for="zwItem in zwComp"
					class="live-play"
					:key="'zwItem-' + zwItem"
					:style="{ width: windowSize[0] + '%', height: windowSize[1] + '%' }"
				>
					<div class="live-play-empty">
						<img class="empty-img" :src="Icon" alt="暂无数据" />
					</div>
				</div>
			</div>
			<div class="palyers-tools" v-if="!isHideTools">
				<ToolsMenu ref="toolsMenuRef" @setWindows="toolFun.setWindows"  @clearAll="toolFun.clearAll" @setRadio="toolFun.setRadio"></ToolsMenu>
			</div>
		</div>
		<!-- 控制器 -->
		<div class="live-players__controls" v-if="!isHideControls">
			<Controls :liveOptions="_currentWindow"></Controls>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed, ref, provide, onMounted, watch, watchEffect} from 'vue'
import { Player, Controls, ToolsMenu} from './components'
import { getVideoWindowSize, autoSplitScreen } from './utils'
import Icon from './assets/icon.svg'
import { PlayType, WindowRadio, SplitScreen } from './enum.ts'
type TplayWindow = {
	id: string,
	url: string,
	name: string,
	[x:string]: any
}

// props数据类型以及默认值
const props = defineProps({
    // 当前视频数
    modelValue: {
		type: Array<TplayWindow>,
        default: () => []
    },
    // 分屏窗口数
    windows: {
        type: Number,
        default: 4

	},
	// 最大分屏数
	maxWindows: {
		type: Number,
        default: 16
	},
    // 显示控制器
    isHideControls: {
        type: Boolean,
        default: false
	},
	// 显隐示工具栏
    isHideTools: {
        type: Boolean,
        default: false
	},
	// 内部自带的工具条
	tools: {
		type: Array,
		default: ['Close', 'ScaleToOriginal','SetScreen', 'FullScreen']
	},
	// 整个播放器背景颜色
	bgColor: {
		type: String,
		default: '#fff'
	},
	// 播放器区域背景色
	palyersBgColor: {
		type: String,
		default: '#fff'
	},
	// 工具条背景色
	toolsBgcolor: {
		type: String,
		default: '#fff'
	},
	// 工具条字体颜色
	toolsColor: {
		type: String,
		default: '#333'
	},
})

//播放器区域的实例
const playersRef = ref('playersRef')
const toolsMenuRef = ref('toolsMenuRef')
provide('playersInstance', playersRef)
provide('tools', props.tools)
provide('toolsColor', props.toolsColor)
provide('windows', props.windows)
provide('maxWindows', props.maxWindows)

// emit事件
const emits = defineEmits(['update:modelValue', 'close', 'closeAll'])

// 分屏数
const _windows = ref(4)
// 当前所有播放视频
const _players = ref(props.modelValue)
// 视频窗口填充比列
const _radio = ref(WindowRadio.RADIO_169)
// 当前选中川口
const _currentWindow = ref<TplayWindow>({
	id: '',
	url: '',
	name: ''
})
// 单个播放窗口大小
const windowSize = computed(() => {
    return getVideoWindowSize(_windows.value)
})
// empty占位数
const zwComp = computed(() => {
    return _windows.value - (_players.value.length || 0)
})
const toolFun = {
	// 清除所有
	clearAll: () => {
		_players.value.splice(0, _players.value.length)
		emits('update:modelValue',_players.value)
	},
	// 设置当前选中窗口
	setCurrentWindow: (d:any) => {
		_currentWindow.value = d
	},
	// 分屏设置
	setWindows: (windows: number) => {
		const hasLen = _players.value.length
		if (hasLen > windows) {
			_players.value.splice(windows, hasLen - windows)
			emits('update:modelValue',_players)
		}
		_windows.value = windows
	},
	// 设置屏幕比列
	setRadio: (radio: number) => {
		_radio.value = radio
	}
}
// 视频窗口关闭
const videoHandleClose = (index: number) => {
	let waitDel = _players.value[index]
	_players.value.splice(index, 1)
	emits('close', waitDel)
	emits('update:modelValue',_players)
	// 判断当前关闭的视频是否是current视频
	if (waitDel.id === _currentWindow.value.id) {
		_currentWindow.value = {
			id: '',
			url: '',
			name: ''
		}
	}
}
const initState = () => {
	_windows.value = props.windows
	getVideoWindowSize(_windows.value)
}
// 初始化组件state
initState()
// 监听添加数据后，自动分屏
watchEffect(()=>{
	const windows = autoSplitScreen(_players.value)
	if(windows>_windows.value && windows<=props.maxWindows){
		_windows.value = windows
		toolsMenuRef.value?.setScreen(windows,false)
	}
	toolFun.setWindows(_windows.value)
})
onMounted(() => {

})
</script>
<style lang="scss" scoped>
@import url('./style/index.css');
.live-players {
	background-color: v-bind(bgColor);
	&__warp {
		background-color: v-bind(palyersBgColor);
	}
	.empty-img{
		width: 60px;
		height: 60px;
	}
}
</style>
